<template>
  <div class="card-box">
    <div class="home-title">预警结构</div>
    <div v-show="showChart" class="chart-wrapper">
      <div id="warning-structure"></div>
    </div>
    <el-empty
      v-show="!showChart"
      description="暂无数据"
      :image-size="80"
    ></el-empty>
  </div>
</template>

<script>
export default {
  props: {
    chartData: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      chart: null,
      baseStructure: [
        {
          name: "管理人员",
          value: 0,
        },
        {
          name: "招投标",
          value: 0,
        },
        {
          name: "管理人员",
          value: 0,
        },
        {
          name: "管理人员",
          value: 0,
        },
        {
          name: "管理人员",
          value: 0,
        },
        {
          name: "管理人员",
          value: 0,
        },
      ],
      showChart: true,
    };
  },
  methods: {
    setOption() {
      let cData = this.chartData.map((i) => {
        return {
          name: i.sub_scene,
          value: i.num,
        };
      });

      let option = {
        legend: {
          show: false,
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        label: {
          formatter: "{b} {c}",
        },
        series: [
          {
            name: "预警统计",
            type: "pie",
            radius: [30, 80],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 10,
            },
            data: cData,
          },
        ],
      };
      option && this.chart.setOption(option);
    },
  },
  mounted() {
    let dom = document.getElementById("warning-structure");
    this.chart = this.$echarts.init(dom);

    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  },
  watch: {
    chartData(newVal) {
      if (newVal && this.chart) {
        if (newVal.length > 0) {
          this.showChart = true;
          this.setOption();
        } else {
          this.showChart = false;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./home.scss";
</style>